<template>
  <div>
    <a-form ref="formRef" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" size="default">
      <slot name="form-item-end-name" :model="form" field="name">
        <a-form-item label="名称">
          <a-input v-model:value="form.name" />
        </a-form-item>
      </slot>
      <slot name="form-item-end-preInterceptors" :model="form" field="preInterceptors">
        <a-form-item label="前置拦截器">
          <a-input v-model:value="form.preInterceptors" />
        </a-form-item>
      </slot>
      <slot name="form-item-end-postInterceptors" :model="form" field="postInterceptors">
        <a-form-item label="后置拦截器">
          <a-input v-model:value="form.postInterceptors" />
        </a-form-item>
      </slot>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch, defineProps, onMounted, defineEmits } from 'vue';
  import { FlowFormModel } from '../types';
  // 注意:ref不能与model一样，相同的话表单双向绑定将会失效
  const formRef = ref(null);
  const form = reactive<FlowFormModel>({} as FlowFormModel);
  // 表单样式
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  // 定义属性
  const props = defineProps<{
    value: FlowFormModel;
  }>();
  const emits = defineEmits(['update:value']);
  watch(
    () => form,
    () => {
      emits('update:value', Object.assign(props.value, form));
    },
    { deep: true }
  );

  onMounted(() => {
    Object.assign(form, props.value);
  });
</script>
